<!--
 * @Author: your name
 * @Date: 2022-03-02 13:34:55
 * @LastEditTime: 2022-04-24 09:21:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceability\components\growing-data.vue
-->
<template>
  <el-card id="growing" class="box-card">
    <div :style="{ height: cloIntHeight + 5 + 'px' }" class="production-batch">
      <span class="zh-lable">
        <el-button v-if="productList.length > 9" type="text" @click="cloIntion">
          <span v-show="!cloInStatus">
            点击收起
            <i class="el-icon-caret-top"> </i>
          </span>
          <span v-show="cloInStatus">
            点击展开
            <i class="el-icon-caret-bottom"> </i>
          </span>
        </el-button>
        <el-button class="button" size="mini" round @click="ret">
          返回上级
        </el-button>
      </span>
      <div
        ref="batchBox"
        :style="{ height: cloIntHeight + 'px' }"
        class="batch-box"
      >
        <span
          v-for="(item, index) in productList"
          :key="index"
          class="batclick"
          :class="nowseindex===index?'batcse':''"
          :title="item.batchName"
        >
          <el-button @click="closeionStartus(item, index)">
            <span>{{ item.batchName }}</span>
            <!-- <h4>点击查看详情</h4> -->
          </el-button>
        </span>
      </div>
    </div>
    <div class="trace-duct">
      <transition name="el-zoom-in-top">
        <ProductTraceability
          ref="prouductmessage"
          :batch-from="productList[nowseindex]"
        />
      </transition>
    </div>
  </el-card>
</template>

<script>
import ProductTraceability from "@/views/trace-source-web/production-traceability-management/components/timeline-traceability/index.vue";
export default {
  components: { ProductTraceability },
  props: {
    batchNo: {
      type: Number,
      default: 0
    },
    productList: {
      type: Array,
      default: () => []
    },
    nowseiontindex: {
      type: Number,
      default: 0
    }
  },
  // components: { zhecharts, zhrowblank },
  data() {
    return {
      loading: false,
      cloInStatus: true,
      cloIntHeight: 90,
      cloIntboxName: "展开",
      batchFromNal: {},
      nowseindex: 0
    };
  },
  // watch: {
  //   nowseiontindex: {
  //     handler(val) {
  //       this.batchFromNal = this.productList[val]
  //     }
  //   }
  // },
  mounted() {
    this.$nextTick(() => {
      if (this.nowseiontindex !== 0) {
        this.nowseindex = this.nowseiontindex
      } else {
        this.nowseindex = 0
      }
    })
  },
  methods: {
    closeionStartus(val, index) {
      // this.batchFromNal = val
      this.nowseindex = index
      // console.log(val)
    },
    ret() {
      this.$emit('ret', 1)
    },
    // 展开关闭
    cloIntion() {
      // 获取当前高度
      let cloIntHeight = this.$refs.batchBox.clientHeight;
      // 根据当前状态切换
      if (this.cloInStatus) {
        this.cloInStatus = false;
      } else {
        this.cloInStatus = true;
      }
      // 根据当前状态和高度， 切换高度
      if (cloIntHeight <= 90 && !this.cloInStatus) {
        this.cloIntHeight = 330;
        this.cloIntboxName = "点击展开";
      } else {
        this.cloIntHeight = 90;
        this.checkboxName = "点击收起";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.batch-title {
  margin-top: 60px;
  margin-bottom: 10px;
  font-size: 24px;
  color: rgba(130, 229, 255, 1);
}
.button {
    background-color: rgba(0, 0, 0, 0);
    color: #fffff0;
    border-radius: 20px;
    padding: 5px 10px;
    margin: 10px 10px 0 5px;
}
.zh-lable {
  width: 80px;
  white-space: nowrap;
  font-size: 16px;
}
.openbtn {
  width: 100%;
}
::v-deep .zhcontent {
  .content {
    height: calc(100% - 77px) !important;
  }
}
#growing {
  width: 100%;
  height: 100%;
  background-color: #22576800;
  color: #fff;
  margin-bottom:0px;
  border: 1px solid rgba(255, 255, 255, 0);
  .production-batch {
      border: 1px dashed #66BDD5;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      height: 95px;
      padding: 1px;
      transition: 1s;
      .zh-lable {
        width: 5%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }
      .batch-box {
        transition: 1s;
        overflow-x: hidden;
        width: 95%;
        padding: 10px;
        background-color: #0e4352;
      }
  }
  .trace-duct {
    // border: 1px dashed #66BDD5;
    height: 110%;
    min-height: 820px;
    max-height: 1000px;
    width: 100%;
    padding-top: 20px;
    overflow-y: hidden;
  }

.batclick {
  // padding-bottom: 10px;
  display: inline-block;
  margin-bottom: 10px;
  width: 20%;
  text-align: center;
  .el-button {
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 15px;
    height:33px;
    line-height: 12px;
    background-color: #007795;
    color: #fffff0;
    border-color: #007795;
    span {
      display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    }
    // h4 {
    //   display: none;
    //   margin: 0;
    //   padding: 0;
    // }
  }
  .el-button:hover {
    color: #01fde0;
    border-color: #01fde0;
    // span {
    //   display: none;
    // }
    // h4 {
    //   display: block;
    // }
  }
}
.batcse {
  .el-button {
    color: #01fde0 !important;
    border-color: #01fde0 !important;
  }
}
}
::v-deep .el-card__body {
    padding: 10px;
    height: 100%;
}
</style>
